<template>
  <div class="flex-row autoGrow manageContainer inviteContainer">
    <choose-service-account
      :multiple="false"
      @serviceChange="serviceChange"
    >
    </choose-service-account>
    <div class="settingOption flex-column">
      <div class="subTitle">群列表</div>
      <div class="autoGrow welcomeOptions flex-column" v-if="service">
        <div class="toggleOwner">
          <input type="radio"
            name="manager"
            value="manager"
            @change="changeGroupType"
            :checked="groupType=='manager'"> 群主
          <input type="radio"
            name="manager"
            value="member"
            @change="changeGroupType"
            :checked="groupType=='member'"> 非群主
        </div>
        <search placeholder="请输入关键词" @change="changeSearch"></search>
        <div class="groupListTitle">
          群（{{filteredGroups ? filteredGroups.length : 0}}）
        </div>
        <div class="groupList autoGrow">
          <user-list-item
            v-for="(group, index) in filteredGroups"
            :key="index"
            :showBadge="false"
            :showLastMessage="false"
            currentUserWxid=""
            :item="group">
            <template v-slot:checkbox>
              <input type="radio"
                name="group"
                :checked="currentGroup&&currentGroup.wxid == group.wxid"
                class="select"
                @change="changeCurrentGroup(group)">
            </template>
            <template v-slot:bottomInfo>
              <div>
                <span>群成员{{group.memberCount}} </span>
                <span>非好友{{group.memberCount - group.friendsCount}}</span>
              </div>
            </template>
          </user-list-item>
        </div>
      </div>
    </div>
    <div class="tableData flex-column autoGrow">
      <div class="subTitle">群邀请统计</div>
      <table class="layui-table autoGrow">
        <colgroup>
          <col width="80">
          <col width="120">
          <col>
        </colgroup>
        <thead>
          <tr>
            <th>群名称</th>
            <th>日期</th>
            <th>邀请人</th>
            <th>被邀请人</th>
            <th>邀请人累计邀请次数</th>
          </tr>
        </thead>
        <tbody v-if="currentGroup">
            <tr v-for="(item, i) in currentGroup.inviteList" :key="i">
              <td>{{currentGroup.name}}</td>
              <td>{{item.date}}</td>
              <td>{{item.invite}}</td>
              <td>{{item.beInvited}}</td>
              <td>{{item.inviteCount}}</td>
            </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
import ChooseServiceAccount from '@/components/chooseServiceAccount'
import UserListItem from '@/components/userListItem'
import QuickReplies from '@/components/quickReplies'
import Search from '@/components/search'

export default {
  name: 'invite',
  data() {
    return {
      currentGroup: null,
      service: null,
      groups: [],
      keyword: '',
      groupType: 'manager', // member
    }
  },
  components: {
    ChooseServiceAccount,
    UserListItem,
    QuickReplies,
    Search
  },
  mounted() {
    let inviteList = []
    for(let i = 0; i < 50; i++) {
      inviteList.push({
        invite: '客服一号',
        beInvited: '用户A'+i,
        date: '2019.09.11',
        inviteCount: 10
      })
    }
    for(let i=0; i<30; i++) {
      this.groups.push({
        wxid: Math.random().toString(16).slice(2),
        name: '优惠购物群'+i,
        manager: i % 3 == 0 ? true : false,
        memberCount: 432,
        friendsCount: 241,
        inviteList: inviteList
      })
    }
  },
  methods: {
    serviceChange(services) {
      this.service = services[0]
    },
    changeGroupType(e) {
      this.groupType = e.target.value
    },
    changeCurrentGroup(group) {
      this.currentGroup = group
    },
    changeSearch(val) {
      this.keyword = val
    },
  },
  computed: {
    filteredGroups() {
      let keyword = this.keyword
      let groupType = this.groupType
      let filteredGroups
      if (keyword=='') {
        filteredGroups = this.groups
      } else {
        filteredGroups = this.groups.filter(g=>g.name.indexOf(keyword)>-1)
      }
      if (groupType == 'manager') {
        filteredGroups = filteredGroups.filter(item=>item.manager)
      } else {
        filteredGroups = filteredGroups.filter(item=>!item.manager)
      }
      return filteredGroups
    }
  }
}
</script>
